<template>
    <div class="editor-wrap">
        <el-form
            class="editor-form"
            ref="formRef"
            :model="form"
            :rules="rules"
            hide-required-asterisk
            label-width="68px">
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="form.gender" placeholder="性别" class="el-full">
                    <el-option label="保密" :value="0" />
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="居住地" prop="area">
                <el-cascader v-model="form.area" :options="provinceAndCityData" clearable filterable/>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <el-date-picker
                    v-model="form.birthday"
                    type="date"
                    placeholder="年月日"
                    style="width: 100%">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="个人简介" prop="brief">
                <el-input
                    v-model="form.brief"
                    type="textarea"
                    :rows="5"
                    resize="none">
                </el-input>
            </el-form-item>
            <div style="text-align: center;">
                <el-button @click="cancel(formRef)">重 置</el-button>
                <el-button type="primary" :loading="loading" @click="submit(formRef)">
                    保 存
                </el-button>
            </div>
        </el-form>
        <div class="editor-avatar">
            <Avatar :size="72" :src="form.avatarUrl"></Avatar>
            <el-upload
                :show-file-list="false"
                :auto-upload="false"
                :on-change="fileSelect"
                accept="image/jpg, image/jpeg, image/png, image/gif">
                <el-button style="margin: 15px 0 10px 0;" size="small">上传头像</el-button>
            </el-upload>
            <span class="avatar-tips">支持jpg、png格式大小2M以内的图片</span>
        </div>
    </div>
    <!-- 裁剪 -->
    <el-dialog v-model="dialogShow" title="头像裁剪" width="650px" destroy-on-close draggable>
        <cropperImage :pic="cropperPic" @cancel="dialogShow = false" @confirm="cropperConfirm"></cropperImage>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import Avatar from '@/components/common/Avatar.vue'
import cropperImage from '../cropper-image.vue'
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus'
import { provinceAndCityData } from 'element-china-area-data'
import { uploadAvatar , updateUserInfo } from '@/apis/user'
import { UserInfor } from '@/apis/user/types'
import useStore from '@/store'
const { user } = useStore()
    
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    nickname: [
        { required: true, message: '用户名不能为空', trigger: ['blur', 'change'] }
    ]

})

// 编辑获取我的信息
// headLine 简介
let form = ref<UserInfor>({
    id: '',
    nickname: '',
    avatarUrl: '',
    gender: 0,
    area: [],
    birthday: '',
    brief: ''
})

user.getMyInfo().then(res => {
    Object.assign(form.value, res)
})


const dialogShow = ref<boolean>(false)
const cropperPic = ref<string>('')

// 点击上传头像, 获取裁剪图片
const fileSelect: UploadProps['onChange'] = (uploadFile) => {
    cropperPic.value = ''
    const file: File = uploadFile.raw as File
    const reader: FileReader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (): void => {
        cropperPic.value = String(reader.result)
        dialogShow.value = true
    }
}

// 上传请求，并更新我的信息以及缓存
const cropperConfirm =  (file: File) => {
    const formData: any = new FormData()
    formData.append('file', file)
    formData.append('type', 'image')
    uploadAvatar(formData).then(res => {
        form.value.avatarUrl = res.url
        cropperPic.value = ''
        dialogShow.value = false
        user.myInfo.avatarUrl = res.url
    })
}

// 提交
const loading = ref<boolean>(false)
const submit = (el: FormInstance | undefined) => {
    if(!el) return
    loading.value = !loading.value
    el.validate(async (valid) => {
        if(valid) {
            updateUserInfo(form.value).then(res => {
                ElMessage.success('修改成功')
                loading.value = !loading.value
                user.setMyInfo(res.data)
            })
        }
    })
}

const cancel = (el: FormInstance | undefined) => {
    if(!el) return
    el.resetFields()
}
</script>

<style lang="less" scoped>
// el元素撑满
.el-full {
    width: 100%;
}
.editor-wrap {
    display: flex;
    .editor-form {
        flex: 1;
        :deep(.el-input__wrapper) {
            width: 100%;
            box-sizing: border-box;
        }
        :deep(.el-cascader) {
            width: 100%;
            box-sizing: border-box;

        }
    }
    .editor-avatar {
        width: 150px;
        margin-left: auto;
        padding-left: 30px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;        
        .avatar-tips {
            display: block;
            font-size: var(--font-size-small);
            color: var(--color-text-l);
            line-height: 1.5;
        }
    }

}
</style>
